<template>
	<!--<el-dialog v-model="visible" title="明细 " :close-on-click-modal='false' :close-on-press-escape='false'
                :fullscreen='true'>-->
	<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
		<el-form-item>
			<el-input size="small" v-model="dataForm.line" placeholder="明细行号" clearable></el-input>
		</el-form-item>
		<el-form-item>
			<el-input size="small" v-model="dataForm.sku" placeholder="物料编码" clearable></el-input>
		</el-form-item>
		<el-form-item>
			<el-input size="small" v-model="dataForm.descr" placeholder="物料名称" clearable></el-input>
		</el-form-item>
		<el-form-item>
			<el-button size="small" @click="getDataList()">查询</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="addOrUpdateReceiptdetailHandleFn()" size="small"
					   v-if="hasPermission('lswms:receipt:save')">新增</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="danger" @click="deleteHandle()" size="small"
					   v-if="hasPermission('lswms:receipt:delete')">删除</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="info" @click="exportHandle()" size="small"
					   v-if="hasPermission('lswms:receipt:export')">导出</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" size="small" @click="showQc()">扫描新增</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" size="small" @click="printQc()">打印随箱卡</el-button>
		</el-form-item>
	</el-form>
	<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
		@sort-change="dataListSortChangeHandle" style="width: 100%;">
		<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
		<!-- <el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column> -->
		<el-table-column prop="receiptkey" label="入库单号" header-align="center" align="center"></el-table-column>
		<el-table-column prop="line" label="明细行号" header-align="center" align="center"></el-table-column>
		<!-- <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column> -->
		<el-table-column prop="statusstr" label="状态" header-align="center" align="center"></el-table-column>
		<el-table-column prop="sku" label="物料编码" header-align="center" align="center"></el-table-column>
		<el-table-column prop="descr" label="物料名称" header-align="center" align="center"></el-table-column>
		<el-table-column prop="factorycdoe" label="计量编码/工装号" header-align="center" align="center"></el-table-column>
		<el-table-column prop="unit" label="单位" header-align="center" align="center"></el-table-column>
		<el-table-column prop="pack" label="包装" header-align="center" align="center"></el-table-column>
		<el-table-column prop="qty" label="预计数量" header-align="center" align="center"></el-table-column>
		<el-table-column prop="actqty" label="实际数量" header-align="center" align="center"></el-table-column>
		<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
		<el-table-column type="expand" label="详情">
			<template #default="props">
				<el-form label-position="left" inline class="demo-table-expand">
					<el-row>
						<el-col :span="4">
							<el-form-item label="仓库:">
								<span>{{ props.row.warehouse }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="目的库位:">
								<span>{{ props.row.toloc }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="目的箱:">
								<span>{{ props.row.totray }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="目的格:">
								<span>{{ props.row.tobox }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="批号:">
								<span>{{ props.row.lot }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="生产日期:">
								<span>{{ props.row.lot1 }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="有效日期:">
								<span>{{ props.row.lot2 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="是否加长:">
								<span>{{ props.row.lot3 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="价格:">
								<span>{{ props.row.lot4 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="部门/供应商:">
								<span>{{ props.row.lot5 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="计划单号/工序号:">
								<span>{{ props.row.lot6 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="主制车间:">
								<span>{{ props.row.lot7 }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="任务编码:">
								<span>{{ props.row.lot8 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="新旧:">
								<span>{{ props.row.lot9 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="作废:">
								<span>{{ props.row.lot10 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="炉批号:">
								<span>{{ props.row.lot11 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="材料复验号:">
								<span>{{ props.row.lot12 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="牌号:">
								<span>{{ props.row.lot13 }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="属性14:">
								<span>{{ props.row.lot14 }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="属性15:">
								<span>{{ props.row.lot15 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="来源单号:">
								<span>{{ props.row.sourceke }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="来源类型:">
								<span>{{ props.row.sourcetype }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="来源单据:">
								<span>{{ props.row.relatedorderkey }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="来源单行:">
								<span>{{ props.row.relatedorderline }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="来源时间:">
								<span>{{ props.row.sourcedate }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="回传码:">
								<span>{{ props.row.backcode }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="回传状态:">
								<span>{{ props.row.backstatus }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="回传时间:">
								<span>{{ props.row.backdate }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="回传结果:">
								<span>{{ props.row.backresult }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="创建人:">
								<span>{{ props.row.adduser }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="创建时间:">
								<span>{{ props.row.addtime }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="更新人:">
								<span>{{ props.row.updatuser }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="更新时间:">
								<span>{{ props.row.updatetime }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</el-table-column>
		<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
			<template #default="scope">
				<el-button type="text" size="small"
					@click="addOrUpdateReceiptdetailHandleFn(scope.row.id,scope.row.status)" v-if="hasPermission('lswms:receipt:update')">修改</el-button>
				<el-button type="text" size="small" @click="deleteHandle(scope.row.id)" v-if="hasPermission('lswms:receipt:delete')">删除</el-button>
				<el-button type="text" size="small"
					@click="receiptHandle(scope.row.id,scope.row.receiptkey,scope.row.status)" v-if="hasPermission('lswms:receiptdetaillist:save')">入库
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
		layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
		@current-change="pageCurrentChangeHandle">
	</el-pagination>
	<!-- 弹窗, 新增 / 修改 -->
	<receiptdetailAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
	</receiptdetailAddOrUpdate>
	<receiptdetaillistAddOrUpdate v-if="receiptdetaillistaddOrUpdateVisible" ref="receiptdetaillistaddOrUpdate"
		@refresh-data-list="getDataList"></receiptdetaillistAddOrUpdate>
	<!--</el-dialog>-->
	<el-dialog  v-model="outerVisible" title="扫描新增">
			<el-form>
				<el-form-item>
					<el-input v-model="qcdata" placeholder="二维码" type="textarea" :autosize="{ minRows: 8, maxRows: 20}"
						clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" @click="putQcData()">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
	<div v-show="false">
		<div>
			<button v-print="'#printObj'" id="print11">Print local range</button>
		</div>
		<div id="printObj">
			<div v-for=" (item,i) in printQcdata "  style="page-break-after:always" >
				<table border="1" cellspacing="0" style="width:320px;height: 240px;text-align:left">
					<tr>
						<td colspan="2" style="text-align:center" height="24px">{{item.lot6}}</td>
					</tr>
					<tr>
						<td rowspan="8" style="width:150px;padding : 10px">
							<qrcode-vue :value="item.qcdataStr" :size=120 level="H" />
						</td>
						<td height="24px">{{item.lot8}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.qty}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.sku}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.lot11}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.lot12}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.lot13}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.totray}}</td>
					</tr>
					<tr>
						<td  height="24px">{{item.descr}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>	
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		watch
	} from 'vue';
	import receiptdetailAddOrUpdate from "@/components/lswms/receipt/ReceiptdetailAddOrUpdate";
	import receiptdetaillistAddOrUpdate from "@/components/lswms/receipt/ReceiptdetaillistAddOrUpdate";

	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";
	
	import {
		postQcCreate,
		getPrintQc
	} from "@/network/lswms/receipt/Receipt.js"
import QrcodeVue from 'qrcode.vue'
	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "receiptdetail",
		props: {
			dataForm1: {
				type: Object
			}
		},
		components: {
			receiptdetailAddOrUpdate,
			receiptdetaillistAddOrUpdate,
			QrcodeVue
		},

		setup(props) {
			const {
				order,
				orderField,
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			// const dataForm=ref({id:'',
			// 	receiptkey:'',
			// 	status:'',
			//
			// 	})
			onMounted(() => {
				dataForm.value = {
					id: '',
					receiptkey: '',
					status: '',

				}

				order.value = 'asc';
				orderField.value = 'line';
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/receiptdetail/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/receiptdetail';
				mixinViewModuleOptions.value.exportURL = '/lswms/receiptdetail/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true;
				dataForm.value.id = props.dataForm1.id;
				dataForm.value.receiptkey = props.dataForm1.receiptkey;
				//	dataForm.value.to

				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}

			})

			const visible = ref(false);
			const init = () => {

				visible.value = true;
				nextTick(function() {
					//  dataFormRef.value.resetFields();
					// roleIdListDefault.value = [];

					if (dataForm.value.receiptkey) {
						dataForm.value.id = '';
						getDataList();


					}

				})
			}

			// 新增 / 修改
			const addOrUpdateReceiptdetailHandleFn = (id, status) => {
				//

				if (id && status != 0) {
					// alert('非新建状态，不可修改')
					return ElMessage.error('非新建状态，不可修改');
				} else {
					addOrUpdateVisible.value = true;
					nextTick(function() {

						addOrUpdate.value.dataForm.id = id;
						addOrUpdate.value.dataForm.receiptkey = dataForm.value.receiptkey;
						addOrUpdate.value.init();
					})
				}



			}


			// 加载收货页面
			const receiptdetaillistaddOrUpdateVisible = ref(false);
			const receiptdetaillistaddOrUpdate = ref(null);
			const receiptHandle = (id, receiptkey) => {
				//
				receiptdetaillistaddOrUpdateVisible.value = true;
				nextTick(function() {
					receiptdetaillistaddOrUpdate.value.dataForm.id = id;
					receiptdetaillistaddOrUpdate.value.dataForm.receiptkey = receiptkey;
					receiptdetaillistaddOrUpdate.value.handleType = 'receipt';
					receiptdetaillistaddOrUpdate.value.dataForm.toloc = 'PA';
					receiptdetaillistaddOrUpdate.value.init();
				})
			}

			watch(dataForm.value, () => {
				getDataList();
			})
			
			const qcdata = ref('');
			const outerVisible = ref(false);
			const showQc = () => {
				qcdata.value = '';
				outerVisible.value = true;
			}
			
			const putQcData = () => {
				if (qcdata.value == '') {
					return ElMessage({
						message: '请录入二维码信息',
						type: 'warning',
						duration: 1000
					});
				}
				postQcCreate({
						'QC': qcdata.value,
						'receiptkey': props.dataForm1.receiptkey
					})
					.then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
								outerVisible.value = false;
							}
						});
					}).catch()
			}
			
			const printQcdata = ref([]);
			const qrCodeDiv = ref(null);
			const printQc = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择单据',
						type: 'warning',
						duration: 1000
					});
				}
				// if (dataListSelections.value.length > 1) {
				// 	return ElMessage({
				// 		message: '请选择一条单据',
				// 		type: 'warning',
				// 		duration: 1000
				// 	});
				// }
				ElMessageBox.confirm('确定打印当前的单据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
			
					let para = {
						"receiptkeys":  dataListSelections.value.map(function(item) {
							return { "receiptkey": item["receiptkey"] ,"line":item["line"] }
						}) 
						// "receiptkey": props.dataForm1.receiptkey
					}
					getPrintQc(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
			
						let printdata = res.data;
						printQcdata.value = [];
			
			
						new Promise(function(resolve, reject) {
							for (let i = 0; i < printdata.length; i++) {
								let sku = printdata[i].sku;
								let descr = printdata[i].descr;
								let totray = printdata[i].totray;
								let lot6 = printdata[i].lot6;
								let lot8 = printdata[i].lot8;
								let lot11 = printdata[i].lot11;
								let lot12 = printdata[i].lot12;
								let lot13 = printdata[i].lot13;
								let qty = printdata[i].qty;
			
								let qcdataStr = lot6 + ";" + lot8 + ";" + sku + ";" + qty +
									";" + lot11 +
									";" + lot12 + ";" + lot13 + ";" + totray + ";" + descr +
									";"
								let tmp = {
									sku,
									descr,
									totray,
									lot6,
									lot8,
									lot11,
									lot12,
									lot13,
									qty,
									qcdataStr
								};
								printQcdata.value.push(tmp);
							}
							resolve();
			
						}).then(function(data) {
							//console.log(data);
							let print11 = document.getElementById("print11");
							print11.click();
						})
					}).catch(function() {});
			
				}).catch(function() {})
			}
			
			
			return {
				order,
				orderField,
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				visible,
				init,
				addOrUpdateReceiptdetailHandleFn,


				receiptdetaillistaddOrUpdateVisible,
				receiptdetaillistaddOrUpdate,
				receiptHandle,
				
				showQc,
				putQcData,
				qcdata,
				outerVisible,
				
				printQc,
				printQcdata,
				qrCodeDiv
			}
		},
		methods:{
		     hasPermission
		}
	}
</script>

<style scoped>

</style>
